<template>
  <h1>Hello Vue3</h1>
  <h2>{{ number }}</h2>
  <button @click="changeNum">改数据</button>
</template>

<script setup lang="ts">
// script setup 优势：
// 1. 使用 `ts` 项目不需要再 `defineComponent` 包裹了。
// 2. 无需再 `return` 了， `template` 可直接使用，顶层的绑定会自动暴露给模板。
// 🚨 书写注意：script setup 在一个vue文件中最多书写一次
import { ref } from 'vue'

const number = ref(10)
const changeNum = () => {
  number.value++
}
</script>

<!-- 
<script lang="ts">
// 较为麻烦的原始写法
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const number = ref(10)
    const changeNum = () => {
      number.value++
    }
    return { number, changeNum }
  },
})
</script> 
-->
